import React from "react";
import Chooser from "components/chooser";
import MulitySelector from "components/template/multi-selector";
import Condition from "components/condition";
import "styles/components/person-selector/index.scss";
import { messages } from "share/common";
import { Popover } from "antd";

const { If } = Condition;

class PersonSelectorUI extends React.Component {
  renderSingleItem = ({ option, index, onSelect, isSelected = false }) => {
    let { exitStaffSelectEnable } = this.props;
    let personInfo = option.data;
    let hasAvatar = personInfo && personInfo.avatar;
    let firstLetter = personInfo.fullName.slice(0, 1);
    const isDepartedEmployee = personInfo.status === 1003;
    const isDisabled = !exitStaffSelectEnable ? isDepartedEmployee : "";
    return (
      <div
        className={this.classNames({
          "selector-item": true,
          selected: isSelected,
          disabled: isDisabled,
        })}
        onClick={() => !isDisabled && onSelect(option)}
      >
        <div className="selector-item-content">
          <div className="user-avatar">
            <If value={hasAvatar}>
              <img src={personInfo.avatar} className={"img-responsive"} />
            </If>
            <If value={!hasAvatar}>{firstLetter}</If>
          </div>
          <div className="user-info-wrapper">
            <div className="user-info-name text-ellipsis">
              <Popover placement="topLeft" content={option.label}>
                {option.label}
              </Popover>
            </div>
            <div className="user-info-department  text-ellipsis">
              <If value={isDepartedEmployee}>
                <span className={"departed-employee"}>{messages("request-1.key833")}</span>
              </If>
              <Popover placement="topLeft" content={personInfo.departmentPath}>
                {personInfo.departmentPath}
              </Popover>
            </div>
          </div>
        </div>
      </div>
    );
  };

  renderMulitySelector = ({ params }) => {
    let props = Object.assign({}, this.props, {
      className: `person-selector ${this.props.className || ""}`,
      listExtraParams: params,
      single: false,
      getCheckboxProps: (record) => ({
        disabled: !this.props.exitStaffSelectEnable ? record.status === 1003 : false, // Column configuration not to be checked
      }),
    });
    return <Chooser {...props} />;
  };

  renderSingleSelector = ({ params }) => {
    let props = Object.assign(
      {},
      {
        serverSearchEnable: true,
      },
      this.props,
      {
        className: `person-selector ${this.props.className || ""}`,
        single: false,
        // searchEnable: true,
        renderItem: this.renderSingleItem,
        params: params,
      }
    );
    return <MulitySelector {...props} />;
  };

  render() {
    let { single } = this.props;
    const params = {
      ...{
        page: 0,
        size: 10,
        roleType: "TENANT",
        status: "all",
      },
      ...this.props.params,
    };
    if (!single) {
      return this.renderMulitySelector({ params });
    }

    return this.renderSingleSelector({ params });
  }
}

PersonSelectorUI.propTypes = {
  single: React.PropTypes.bool, // 人员是单选还是多选
  params: React.PropTypes.object, // 接口访问时的额外参数
  searchOnFocus: React.PropTypes.bool, //组件获焦时是否搜索
  exitStaffSelectEnable: React.PropTypes.bool, // 离职员工是否可以被选中
  searchEnable: React.PropTypes.bool, // 单选时是否支持搜索
};
PersonSelectorUI.defaultProps = {
  single: false,
  params: {},
  searchOnFocus: true,
  exitStaffSelectEnable: false,
  searchEnable: true,
};

export default PersonSelectorUI;
